<template>
  <PageDetail :visible.sync="detailVisible">
    <div class="custom-ant">
      <a-card title="基本信息" :bordered="false">
        <a-form-model
          ref="formRef"
          :model="formData"
          :rules="formRules"
          layout="vertical">
          <a-row :gutter="24">
            <a-col :md="8" :sm="12">
              <a-form-model-item label="绩效考核名称" prop="examineName">
                <a-input v-model="formData.examineName" :disabled="isLook" placeholder="请输入绩效考核名称" />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="12">
              <a-form-model-item label="考核编号" prop="examineCode">
                <a-input v-model="formData.examineCode" :disabled="isLook" placeholder="请输入考核编号" />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="12">
              <a-form-model-item label="所属品类" prop="examineCategory">
                <ASelectList v-model="formData.examineCategory" :disabled="isLook" :isHasDict="false" :defaultOption="examineCategoryOption" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="8" :sm="12">
              <a-form-model-item label="考核时间" prop="examineTime">
                <a-range-picker
                  v-model="formData.examineTime"
                  :disabled="isLook"
                  format="YYYY-MM-DD"
                  style="width:100%;"
                  @change="(timeRange, timeStringRange) => setTimeRange('examineTimeStart', 'examineTimeEnd', timeRange, timeStringRange)"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card title="考核供应商" :bordered="false">
        <a-form layout="inline" @keyup.enter.native="handleSearch">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <CompositeSearch
                :fieldList="fieldList"
                @getParams="getSearchValue"
                @adSearch="onAdSearch"
                @adClear="onAdClear"
                @tagClick="onTagClick">
                <template v-slot:ad-search-content>
                  <a-form-model
                    ref="adSearchFormRef"
                    :model="adSearchFormData"
                    layout="vertical">
                    <a-row :gutter="24">
                      <a-col :span="24">
                        <a-form-model-item label="创建时间">
                          <a-range-picker
                            v-model="createTime"
                            format="YYYY-MM-DD"
                            style="width:100%;"
                            @change="(timeRange, timeStringRange) => setTimeRange('createTimeStart', 'createTimeEnd', timeRange, timeStringRange)"/>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </template>
              </CompositeSearch>
            </a-col>
            <a-col :md="18" :sm="24">
              <div class="space-btn" style="line-height: 32px;">
                <a-button v-if="!isLook" type="primary" @click="onSelectSupplier">选择供应商</a-button>
                <a-button v-if="!isLook" @click="onBatchQualitativeExamine">批量定性考核</a-button>
                <a-button v-if="!isLook" type="danger" @click="onBatchDelete">删除</a-button>
                <a-checkbox v-model="isCheckSpecific" @change="isCheckSpecificChange">仅查看待定性考核</a-checkbox>
              </div>
            </a-col>
          </a-row>
        </a-form>
        <a-table
          ref="table"
          rowKey="id"
          size="middle"
          bordered
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          :row-selection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :scroll="{ x: 1, y: 400 }"
          :pagination="pagination">
          <span slot="date" slot-scope="text">{{ (text || '/') | DateFormat }}</span>
          <template slot="examineStatus" slot-scope="text">
            <span :class="{'cus-text': text === '1'}" warn>{{ examineStatusEnum[text] }}</span>
          </template>
          <template slot="examineLevel" slot-scope="text">
            <span
              :class="{'cus-text': ['C', 'D'].includes(text)}"
              :warn="text === 'C'"
              :danger="text === 'D'">
              {{ text || '/' }}
            </span>
          </template>
          <template slot="totalExamineScore" slot-scope="text"><span>{{ text || '/' }}</span></template>
          <template slot="autoExamineScore" slot-scope="text, record">
            <span>{{ text || '/' }}</span>
            <a-popover title="自动化考核得分明细" trigger="click">
              <template slot="content">
                <ExamineScoreTable type="auto" :totalScore="text" :examineList="record.autoExamineScoreList || []" />
              </template>
              <a-icon v-if="text" type="info-circle" class="circle-hover ml-10" />
            </a-popover>
          </template>
          <template slot="qualitativeExamineScore" slot-scope="text, record">
            <span>{{ text || '/' }}</span>
            <a-popover title="定性考核得分明细" trigger="click">
              <template slot="content">
                <ExamineScoreTable type="qualitative" :totalScore="text" :examineList="record.qualitativeExamineScoreList || []" />
              </template>
              <a-icon v-if="text" type="info-circle" class="circle-hover ml-10" />
            </a-popover>
          </template>
          <template slot="action" slot-scope="text, record, index">
            <span
              v-if="isLook && record.examineStatus !== '1'"
              class="cus-text"
              pointer
              @click="onCheckQualitativeExamine(record)">
              查看定性考核明细
            </span>
            <span
              v-if="!isLook && record.examineStatus === '1'"
              class="cus-text"
              pointer
              @click="onQualitativeExamine(record, index)">
              定性考核
            </span>
            <span
              v-if="!isLook && record.examineStatus === '1'"
              class="cus-text"
              pointer
              danger
              @click="onDelete(record)">
              删除
            </span>
            <span
              v-if="!isLook && record.examineStatus !== '1'"
              class="cus-text"
              pointer
              @click="onQualitativeExamine(record, index)">
              编辑定性考核
            </span>
          </template>
        </a-table>
      </a-card>
      <!-- 选择供应商 -->
      <SupplierSelect ref="SupplierSelect" @successCallback="supplierSelectCallback" />
      <!-- 定性考核供应商 -->
      <SupplierQualitativeExamine ref="SupplierQualitativeExamine" @successCallback="supplierQualitativeExamineCallback" />
    </div>
    <template v-slot:footer>
      <a-button v-if="!isLook" type="primary" @click="onSubmit">确定</a-button>
      <a-button @click="onCancel">取消</a-button>
    </template>
  </PageDetail>
</template>

<script>
import ListPageMixin from '@/mixins/ListPageMixin.js';
import SupplierSelect from '@views/supplier-manage/performace-examine/components/SupplierSelect.vue'
import SupplierQualitativeExamine from '@views/supplier-manage/performace-examine/components/SupplierQualitativeExamine.vue'
import ExamineScoreTable from '@views/supplier-manage/components/ExamineScoreTable.vue'

export default {
  name: 'PerformaceExamineDetail',
  mixins: [ ListPageMixin ],
  components: {
    SupplierSelect,
    SupplierQualitativeExamine,
    ExamineScoreTable
  },
  data() {
    return {
      detailVisible: false,
      isLook: false,
      examineCategoryOption: [
        { label: '传感器、驱动电机', value: '1' },
      ],
      formData: {
        examineName: '',
        examineCode: '',
        examineCategory: '',
        examineTime: [],
        examineTimeStart: '',
        examineTimeEnd: '',
      },
      formRules: {
        examineName: [{ required: true, message: '请输入绩效考核名称！', trigger: 'change' }],
        examineCode: [{ required: true, message: '请输入考核编号！', trigger: 'change' }],
        examineCategory: [{ required: true, message: '请选择所属品类！', trigger: 'change' }],
        examineTime: [{ required: true, message: '请选择考核时间！', trigger: 'change' }],
      },
      examineStatusEnum: {
        '1': '待定性考核',
        '2': '自动化考核中',
        '3': '已完成',
      },
      fieldList: [
        { name: '考核品类', field: 'field1' },
        { name: '绩效编号', field: 'field2' },
        { name: '绩效考核名称', field: 'field3' },
        { name: '考核总数', field: 'field4' }
      ],
      adSearchFormData: {
        createTimeStart: '',
        createTimeEnd: '',
      },
      createTime: [],
      isCheckSpecific: false,
      dataSource: [],
      originalDataSource: [
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '1',
          supplierName: '河南盛世机械工具集团有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '传感器供应商',
          examineLevel: '',
          totalExamineScore: '',
          autoExamineScore: '',
          autoExamineScoreList: [],
          qualitativeExamineScore: '',
          qualitativeExamineScoreList: [],
          autoExamineTime: '',
          qualitativeExamineTime: '',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '2',
          supplierName: '广州三五零配件有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '传感器供应商',
          examineLevel: '',
          totalExamineScore: '70',
          autoExamineScore: '',
          autoExamineScoreList: [],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            {
              type: '1',
              name: '价格',
              score: '21',
              children: [
                { name: '价格下降率', score: 10, getScore: 7 },
                { name: '价格弹性', score: 10, getScore: 7 },
                { name: '价格透明度', score: 10, getScore: 7 },
              ]
            },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '广汽集团广天有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '传感器供应商',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '	河南盛世机械工具集团有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '传感器供应商',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '深圳三五零配件有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '传感器供应商',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '深圳集团广天有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '驱动电机',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '盛世机械工具集团有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '驱动电机',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '湛江三五零配件有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '驱动电机',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '广天集团广天有限公司',
          supplierCode: 'GYS20241208001',
          examineCategory: '驱动电机',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        },
        {
          createTime: '2024-06-08 11:08:30',
          examineStatus: '3',
          supplierName: '万盛世机械工具集团',
          supplierCode: 'GYS20241208001',
          examineCategory: '驱动电机',
          examineLevel: 'A',
          totalExamineScore: '98',
          autoExamineScore: '28',
          autoExamineScoreList: [
            { title: '考核项', name: '交货及时率', weight: '80', score: '8' },
            { title: '百分比', name: '入库合格率', weight: '100', score: '10' },
            { title: '得分', name: '使用不良率', weight: '100', score: '10' }
          ],
          qualitativeExamineScore: '70',
          qualitativeExamineScoreList: [
            { name: '价格', score: '21' },
            { name: '付款条件', score: '14' },
            { name: '履约交互', score: '14' },
            { name: '服务态度', score: '10.5' },
            { name: '品质', score: '10.5' }
          ],
          autoExamineTime: '2024-06-08 11:08:30',
          qualitativeExamineTime: '2024-06-08 11:08:30',
        }
      ],
      columns: [
        { title: '序号', width: 50, customRender: (text, record, index) => `${index + 1}`, align: 'center' },
        { title: '创建时间', dataIndex: 'createTime', width: 120, scopedSlots: { customRender: 'date' }, ellipsis: true },
        { title: '考核状态', dataIndex: 'examineStatus', width: 120, scopedSlots: { customRender: 'examineStatus' }, ellipsis: true },
        { title: '供应商', dataIndex: 'supplierName', width: 220, ellipsis: true },
        { title: '供应商编号', dataIndex: 'supplierCode', width: 150, ellipsis: true },
        { title: '所属品类', dataIndex: 'examineCategory', width: 150, ellipsis: true },
        { title: '考核等级', dataIndex: 'examineLevel', width: 120, scopedSlots: { customRender: 'examineLevel' }, ellipsis: true },
        { title: '总得分', dataIndex: 'totalExamineScore', width: 120, scopedSlots: { customRender: 'totalExamineScore' }, ellipsis: true },
        { title: '自动化考核得分', dataIndex: 'autoExamineScore', width: 120, scopedSlots: { customRender: 'autoExamineScore' }, ellipsis: true },
        { title: '定性考核得分', dataIndex: 'qualitativeExamineScore', width: 120, scopedSlots: { customRender: 'qualitativeExamineScore' }, ellipsis: true },
        { title: '自动化考核时间', dataIndex: 'autoExamineTime', width: 120, scopedSlots: { customRender: 'date' }, ellipsis: true },
        { title: '定性考核时间', dataIndex: 'qualitativeExamineTime', width: 120, scopedSlots: { customRender: 'date' }, ellipsis: true },
        { title: '操作', dataIndex: 'action', width: 150, align: 'center', fixed: 'right', scopedSlots: { customRender: 'action' } }
      ],
      curIndex: null, // 当前操作index
    }
  },
  computed: {
    // isLook() {
    //   return this.$route.path.endsWith('/detail');
    // }
  },
  created() {
    this.handleSearch();
  },
  methods: {
    open({ isLook }) {
      this.isLook = isLook;
      this.detailVisible = true;
    },
    // 获取 搜索框参数
    getSearchValue(currentValue, selectFiledList) {
      console.log(currentValue, selectFiledList, 'getSearchValue');
      this.handleSearch();
    },
    // 确定搜索 高级搜索
    onAdSearch() {
      console.log(this.adSearchFormData, '确定搜索 高级搜索');
      this.handleSearch();
    },
    // 重置 高级搜索
    onAdClear() {
      console.log('重置 高级搜索');
    },
    onTagClick(data) {
      console.log(data, 'onTagClick');
      const { name } = data;
      if (['筛选组合01', '筛选组合02', '筛选组合03'].includes(name)) {
        this.adSearchFormData.supplierStatus = '1';
        this.adSearchFormData.approveStatus = '1';
      } else if (['筛选组合04', '筛选组合05', '筛选组合06'].includes(name)) {
        this.adSearchFormData.supplierStatus = '2';
        this.adSearchFormData.approveStatus = '2';
      } else {
        this.adSearchFormData.supplierStatus = '3';
        this.adSearchFormData.approveStatus = '3';
      }
    },
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.onSelectClear();
        this.dataSource = this.originalDataSource
      }, 100)
    },
    onSelectSupplier() {
      this.$refs.SupplierSelect.onDrawerOpen();
    },
    onBatchQualitativeExamine() {
      if (this.selectedRowKeys.length) {
        this.$refs.SupplierQualitativeExamine.onDrawerOpen();
      } else {
        this.$message.error(`请选择数据！`);
      }
    },
    // 批量删除
    onBatchDelete() {
      if (this.selectedRowKeys.length) {
        this.$confirm({
          title: '批量删除',
          content: '确认批量删除？',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            this.handleSearch();
            this.$message.success(`操作成功`);
          }
        });
      } else {
        this.$message.error(`请选择数据！`);
      }
    },
    // 删除
    onDelete(record) {
      record
      this.$confirm({
        title: '批量删除',
        content: '确认批量删除？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.handleSearch();
          this.$message.success(`操作成功`);
        }
      });
    },
    isCheckSpecificChange() {
      console.log(this.isCheckSpecific, 'isCheckSpecific');
      if (this.isCheckSpecific) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.onSelectClear();
          this.dataSource = this.originalDataSource.filter(item => item.examineStatus === '1');
        }, 100)
      } else {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.onSelectClear();
          this.dataSource = this.originalDataSource
        }, 100)
      }
    },
    onCheckQualitativeExamine(record) {
      this.$refs.SupplierQualitativeExamine.onDrawerOpen(record, true);
    },
    onQualitativeExamine(record, index) {
      this.curIndex = index;
      this.$refs.SupplierQualitativeExamine.onDrawerOpen(record, false);
    },
    supplierSelectCallback() {

    },
    supplierQualitativeExamineCallback(data, newList) {
      console.log(this.curIndex, 'this.curIndex');
      const record = this.dataSource[this.curIndex];
      record.qualitativeExamineScore = data.totalScore;
      record.qualitativeExamineScoreList.forEach((item, index) => {
        item.score = data[`score${index + 1}`];
      })
      record.newList = newList;
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$confirm({
            title: '操作提醒',
            content: '确定保存？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              this.onCancel();
              this.$message.success(`操作成功`);
            }
          });
        } else {
          this.$message.error(`请把表单补充完整！`);
        }
      });
    },
    onCancel() {
      this.detailVisible = false;
    },
  }
}
</script>

<style lang="less" scoped>
.circle-hover {
  cursor: pointer;
}
.circle-hover:hover {
  color: #1890FF;
}
</style>